<template>
  <div class="memo-container">
    <div class="memo">
      <div class="mark"></div>
      <div class="memo-heading">
        <h5 class="title">{{memo.title}}</h5>
        <ul class="tools">
          <li
            class="edit"
            @click="editMemo"
          ></li>
          <li
            class="delete"
            @click="delMemo"
          ></li>
        </ul>
      </div>
      <h6 class="memo-info">
        <span class="timeStamp">{{memo.createTime}}</span>
        <span class="category">分类: {{$store.state.aHelper.getCategory(memo.categoryId)}}</span>
      </h6>
      <div class="content">
        <div class="text">{{memo.content}}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Prop, Component } from "vue-property-decorator";
import ItemData from "../model/ItemData";

@Component
export default class Memo extends Vue {
  @Prop() memo!: ItemData;

  // 编辑笔记
  editMemo() {
    this.$store.state.transMemo = JSON.parse(JSON.stringify(this.memo));
    this.$store.state.isShowEditModel = true;
  }
  // 删除笔记
  delMemo() {
    if (!window.confirm(`是否确认删除【${this.memo.title}】笔记`)) return;
    let id: number = this.memo.id;
    this.$store.state.aHelper.remove(id);
  }
}
</script>

<style lang="scss" scoped>
</style>